<template>
  <div>
    <Header :back="true"></Header>

    <van-tabs type="card">
      <van-tab :title="item.title" v-for="item in tabs" :key="item.title">
        <van-tabs v-if="item.month">
          <van-tab :title="ele.date" v-for="ele in item.month" :key="ele.date">
            <div class="data" v-if="item.title=='进项发票'">
              <div class="th">
                <div class="td1">发生日期</div>
                <div class="td2">票据号码</div>
                <div class="td3" style="text-align:center">金额</div>
                <div class="td4">类型</div>
              </div>
              <div class="tr">
                <div class="td1">{{ele.date}}</div>
                <div class="td2">4356767 - 78345245</div>
                <div class="td3">9000.00</div>
                <div class="td4">销项</div>
              </div>
            </div>

            <div class="data" v-if="item.title=='社保'">
              <van-collapse v-model="activeNames">
                <van-collapse-item title="合计" :value="'共计缴纳：'+total" name="0">
                  <div class="title">
                    <div>单位缴纳</div>
                    <div>{{unitTotal}}</div>
                  </div>
                  <div class="title">
                    <div>个人缴纳</div>
                    <div>{{personTotal}}</div>
                  </div>
                </van-collapse-item>
                <van-collapse-item :title="item.name" :value="'共计缴纳：'+item.total" :name="i+1" v-for="(item,i) in sbList" :key="item.name">
                  <div class="title">
                    <div>缴款日期</div>
                    <div>{{item.date}}</div>
                  </div>
                  <div class="title">
                    <div>缴款所属期</div>
                    <div>{{item.period}}</div>
                  </div>
                  <div class="title">
                    <div>身份证号</div>
                    <div>{{item.id}}</div>
                  </div>
                  <div class="title">
                    <div>单位缴纳</div>
                    <div>{{item.unit}}</div>
                  </div>
                  <div class="title">
                    <div>个人缴纳</div>
                    <div>{{item.person}}</div>
                  </div>
                </van-collapse-item>
              </van-collapse>
            </div>

            <div class="data" v-if="item.title=='期末留抵'">
              <van-cell-group>
                <van-cell title="期末留抵" :value="'('+ele.date+')'" />
              </van-cell-group>
            </div>
          </van-tab>
        </van-tabs>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Header from "@/components/header";
export default {
  components: {
    Header,
  },
  data() {
    return {
      tabs: [
        {
          title: "进项发票",
          month: [
            {
              date: "2021-07",
              data: [
                {
                  id: 1,
                  text: "数据1",
                },
              ],
            },
            {
              date: "2021-06",
              data: [
                {
                  id: 2,
                  text: "数据2",
                },
              ],
            },
            {
              date: "2021-05",
              data: [
                {
                  id: 3,
                  text: "数据3",
                },
              ],
            },
            {
              date: "2021-04",
              data: [
                {
                  id: 4,
                  text: "数据4",
                },
              ],
            },
            {
              date: "2021-03",
              data: [
                {
                  id: 5,
                  text: "数据5",
                },
              ],
            },
            {
              date: "2021-02",
              data: [
                {
                  id: 6,
                  text: "数据6",
                },
              ],
            },
            {
              date: "2021-01",
              data: [
                {
                  id: 7,
                  text: "数据7",
                },
              ],
            },
          ],
        },
        {
          title: "销项发票",
        },
        {
          title: "工资表",
        },
        {
          title: "社保",
          month: [
            {
              date: "2021-07",
              data: [
                {
                  id: 1,
                  text: "数据1",
                },
              ],
            },
            {
              date: "2021-06",
              data: [
                {
                  id: 2,
                  text: "数据2",
                },
              ],
            },
            {
              date: "2021-05",
              data: [
                {
                  id: 3,
                  text: "数据3",
                },
              ],
            },
            {
              date: "2021-04",
              data: [
                {
                  id: 4,
                  text: "数据4",
                },
              ],
            },
            {
              date: "2021-03",
              data: [
                {
                  id: 5,
                  text: "数据5",
                },
              ],
            },
            {
              date: "2021-02",
              data: [
                {
                  id: 6,
                  text: "数据6",
                },
              ],
            },
            {
              date: "2021-01",
              data: [
                {
                  id: 7,
                  text: "数据7",
                },
              ],
            },
          ],
        },
        {
          title: "期末留抵",
          month: [
            {
              date: "2021-07",
              data: [
                {
                  id: 1,
                  text: "数据1",
                },
              ],
            },
            {
              date: "2021-06",
              data: [
                {
                  id: 2,
                  text: "数据2",
                },
              ],
            },
            {
              date: "2021-05",
              data: [
                {
                  id: 3,
                  text: "数据3",
                },
              ],
            },
            {
              date: "2021-04",
              data: [
                {
                  id: 4,
                  text: "数据4",
                },
              ],
            },
            {
              date: "2021-03",
              data: [
                {
                  id: 5,
                  text: "数据5",
                },
              ],
            },
            {
              date: "2021-02",
              data: [
                {
                  id: 6,
                  text: "数据6",
                },
              ],
            },
            {
              date: "2021-01",
              data: [
                {
                  id: 7,
                  text: "数据7",
                },
              ],
            },
          ],
        },
      ],
      activeNames: ["1"],
      total: 3077.13,
      unitTotal: 2126.76,
      personTotal: 950.37,
      sbList: [
        {
          name: "王海",
          date: "202108",
          period: "202108",
          id: "34122719880714256",
          unit: 1375.11,
          person: 950.37 - 275.06,
          total: 3077.13 - 1025.71,
        },
        {
          name: "黄好娟",
          date: "202108",
          period: "202108",
          id: "34122719880714256",
          unit: 750.65,
          person: 275.06,
          total: 1025.71,
        },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
.van-tabs {
  margin-top: 0.3rem;
}
/deep/.van-tabs__nav--card {
  margin: 0;
  border-top: 1px solid #07c160;
  border-bottom: 1px solid #07c160;
  border-left: 1px solid #07c160;
  border-right: 1px solid #07c160;
}
/deep/.van-tabs__nav--card .van-tab.van-tab--active {
  background-color: #07c160;
}
/deep/.van-tabs__nav--card .van-tab {
  border-right-color: #07c160;
  color: #07c160;
}
/deep/.van-tabs__nav--card .van-tab.van-tab--active {
  color: #fff;
}
/deep/.van-tabs__line {
  background-color: #07c160;
}
/deep/.van-tabs__wrap {
  width: 96vw;
  margin: auto;
}
.th {
  margin-top: 1rem !important;
  border-bottom: 0 solid #000 !important;
  font-weight: bold;
}
.data {
  width: 96vw;
  margin: auto;
  margin-top: 1rem;

  .title {
    display: flex;
    justify-content: space-between;
    color: #444;
    margin-bottom: 0.8rem;
    div {
      &:first-child {
        font-weight: bold;
      }
    }
  }
}
.th,
.tr {
  display: flex;
  border: 1px solid #eee;
  height: 3rem;
  line-height: 3rem;
  text-align: center;
  width: 96vw;
  margin: auto;
  font-size: 12px;
  .td1 {
    flex: 1;
    border-right: 1px solid #eee;
  }
  .td2 {
    flex: 2;
    border-right: 1px solid #eee;
  }
  .td3 {
    flex: 1;
    border-right: 1px solid #eee;
    text-align: right;
  }
  .td4 {
    flex: 0.8;
    border-right: none;
  }
}
</style>